<template>
	<view class="prompt-box" v-if="show">
		<view class="prompt-content contentFontColor">
			<view class="prompt-title">{{ title }}</view>
			<textarea class="prompt-input" type="digit" @input="_input" maxlength="30" :placeholder="tip" :value="value"></textarea>
			<view class="prompt-btn-group">
				<view class="btn-item prompt-cancel-btn contentFontColor" @click="_cancel">{{ btn_cancel }}</view>
				<view class="btn-item prompt-certain-btn" @click="_confirm">{{ btn_confirm }}</view>
			</view>
		</view>
	</view>
</template>

<script>
    /**
     * 输入框弹窗组件
     *
     * ===== 使用场景 ======
     * 个人信息页
     *
     * ===== 参数 =====
     * show         是否显示弹窗组件
     * title        弹窗标题
     * tip          弹窗提示
     * value        值
     * btn_cancel   取消按钮
     * btn_confirm  确定按钮
     *
     * * ===== 事件 =====
     * _cancel      取消事件
     * _confirm     确定事件
     * _input       监听输入框值的变化
     */
	export default {
        props:{
            show: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: '标题'
            },
            tip: {
                type: String,
                default: '提示'
            },
            value: {
                type: String,
                default: ''
            },
            btn_cancel: {
                type: String,
                default: '取消'
            },
            btn_confirm: {
                type: String,
                default: '确定',
            }
        },
        methods: {
            _cancel() { this.$emit('cancel') },
            _confirm() { this.$emit('confirm') },
            _input(e) { this.$emit('getNickname', e.detail) }
        }
	}
</script>

<style lang="scss" scoped>
    .prompt-box {
    	position: fixed;
    	left: 0;
    	top: 0;
    	width: 100%;
    	height: 100%;
    	z-index: 11;
    	background: rgba(0, 0, 0, .5);
        .prompt-content {
        	position: absolute;
        	left: 50%;
        	top: 40%;
        	width: 80%;
        	max-width: 600rpx;
        	border-radius: 40rpx;
        	box-sizing: bordre-box;
        	transform: translate(-50%, -50%);
        	overflow: hidden;
        	background: #fff;
            .prompt-title {
            	width: 100%;
            	padding: 20rpx;
            	text-align: center;
            	font-size: 30rpx;
            	font-weight: 600;
            }
            .prompt-input{
            	margin:0 20rpx 30rpx;
            	padding:20rpx;
            	font-size: 26rpx;
            	width: 560rpx;
            	height: 300rpx;
            	box-sizing: border-box;
            	color: #000;
            	background-color: #f4f4f4;
            	border-radius: 10rpx;
            }
            .prompt-btn-group{
            	display: flex;
            	border-top: 1rpx solid #F8F8F8;
            	justify-content: space-around;
            	align-items: center;
                .btn-item {
                	flex: 1;
                	line-height: 90rpx;
                	background-color: white;
                	border: none;
                	text-align: center;
                	font-size: 30rpx;
                }
                .prompt-certain-btn{
                	color: #ff5000;
                }
                .prompt-cancel-btn{
                	border-right: 2rpx solid #F8F8F8;
                }
            }
        }
        .contentFontColor {
        	color: #868686;
        }
    }
</style>
